<template>
  <div>
    <a-row>
      <a-col :span="5">
        <a-card>
          <div style="height: calc(100vh - 150px);background: #fff;padding: 10px;">
            <a-input-search v-model:value="value2">
              <template #addonBefore>
                <a-select v-model:value="value3" style="width: 100px">
                  <a-select-option value="sp_num">商铺编号</a-select-option>
                  <a-select-option value="f_num">房号</a-select-option>
                  <a-select-option value="zk_num">租客名</a-select-option>
                  <a-select-option value="phone">手机号</a-select-option>
                </a-select>
              </template>

            </a-input-search>
            <a-tree v-model:expandedKeys="expandedKeys" :expanded-keys="expandedKeys" @select="handleTreeNodeSelect"
              show-icon v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys" :tree-data="treeData">
              <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
              <template #icon="{ key, selected }">
                <template v-if="key.startsWith('0-0-0-0-0-')">
                  <barcode-outlined />
                </template>
                <template v-else-if="key.startsWith('0-0-0-0-')">
                  <block-outlined />
                </template>
                <template v-else-if="key.startsWith('0-0-0-')">
                  <home-outlined />
                </template>
                <template v-else-if="key.startsWith('0-0-')">
                  <bank-outlined />
                </template>
                <template v-else-if="key.startsWith('0-')">
                  <apartment-outlined />
                </template>
                <!-- Add more conditions as needed -->
                <template v-else>
                  <!-- Default case -->
                  <frown-filled v-if="selected" />
                  <frown-outlined v-else />
                </template>
                <!-- <template v-else>
                <frown-filled v-if="selected" />
                <frown-outlined v-else />
              </template> -->
              </template>
              <template #title="{ title, key }">
                <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                <template v-else>{{ title }}</template>
              </template>
            </a-tree>
          </div>


        </a-card>
      </a-col>
      <a-col :span="19">
        <XmTable v-if="currentComponent === 'XmTable'" />
        <Gezi v-else-if="currentComponent === 'Gezi'" />
      </a-col>
    </a-row>



  </div>
</template>
<script setup>
import { DownOutlined, ApartmentOutlined, BankOutlined, HomeOutlined, FrownOutlined, FrownFilled, BlockOutlined, BarcodeOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { ref, watch } from 'vue';
//引入组件

// 使用 <script setup> 语法

// 引入组件
import Gezi from './components/gezi.vue'; // 根据你的项目结构调整路径
import XmTable from './components/xmtable.vue'; // 根据你的项目结构调整路径

// 外部传递的属性
const parentMessage = 'Hello from parent'


//左上角输入框的内容变量
const value2 = ref('mysite');
const value3 = ref('sp_num');
//树形控件的数据
const treeData = [
  {
    title: '广州雪山文化发展有限公司',
    key: '0-0',
    children: [
      {
        title: '项目2',
        key: '0-0-0',
        children: [
          {
            title: '2',
            key: '0-0-0-0',
            children: [
              {
                title: '1',
                key: '0-0-0-0-0',
                children: [
                  {
                    title: '101',
                    key: '0-0-0-0-0-0',
                  },
                  {
                    title: '102',
                    key: '0-0-0-0-0-1',
                  },
                  {
                    title: '103',
                    key: '0-0-0-0-0-2',
                  },
                  {
                    title: '104',
                    key: '0-0-0-0-0-3',
                  },
                  {
                    title: '105',
                    key: '0-0-0-0-0-4',
                  },
                ],
              },
            ],
          },
        ],
      },

    ],
  },
];


// 是否显示xmtable
const showXmTable = ref(false);
const showGezi = ref(false);

//点击节点的事件函数
const handleTreeNodeSelect = (selectedKeys, info) => {
  console.log('选择的kye:', selectedKeys);
  console.log('选择的节点信息:', info);

  // 根据选中的节点层级动态切换组件
  if (selectedKeys.length > 0) {
    const keyParts = selectedKeys[0].split('-');
    switch (keyParts.length) {
      case 3:
        // 0-0-0 层级显示 XmTable 组件
        currentComponent.value = 'XmTable';
        break;
      case 4:
        // 0-0-0-0 层级显示 Gezi 组件
        currentComponent.value = 'Gezi';
        break;
      default:
        currentComponent.value = null;
        break;
    }
  } else {
    currentComponent.value = null;
  }



  // 其他自定义逻辑...
};

//租金单价排行表头信息
const columns = [
  {
    title: '排名',
    dataIndex: 'rank',
    key: 'rank',
  },
  {
    title: '租客',
    dataIndex: 'tenant',
    key: 'tenant',
  },
  {
    title: '租赁单价',
    dataIndex: 'unitPrice',
    key: 'unitPrice',
  },
  {
    title: '租赁天数',
    dataIndex: 'rentalDays',
    key: 'rentalDays',
  },
  {
    title: '租赁面积',
    dataIndex: 'rentalArea',
    key: 'rentalArea',
  },
  {
    title: '店铺',
    dataIndex: 'shop',
    key: 'shop',
  },
];

//租金单价排行表格信息
const tableData = [
  // { rank: 1, tenant: '租客1', unitPrice: 100, rentalDays: 30, rentalArea: 50, shop: '店铺A' },
];


//展开所有tree的处理函数
// 获取所有节点的键值
const allNodeKeys = treeData.reduce((keys, node) => {
  keys.push(node.key);
  if (node.children) {
    keys.push(...getAllNodeKeys(node.children));
  }
  return keys;
}, []);

const expandedKeys = ref(allNodeKeys);
const currentComponent = ref('XmTable');


function getAllNodeKeys(nodes) {
  return nodes.reduce((keys, node) => {
    keys.push(node.key);
    if (node.children) {
      keys.push(...getAllNodeKeys(node.children));
    }
    return keys;
  }, []);
}
</script>